<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Draggable</title>
	<style>
		.box {
			width: 400px;
			height: 200px;
			background-color: tomato;
			position: absolute;
			left: 120px;
			top: 120px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script>
		var box = document.querySelector('.box');
		box.addEventListener("mousedown",function(e) {
			// 鼠标距离box左边框的距离
			var x = e.pageX - box.offsetLeft;
			// 鼠标距离box上边框的距离
			var y = e.pageY - box.offsetTop;
			this.innerHTML = "x坐标：" + x + "y坐标" + y;
			document.addEventListener("mousemove", move);
			function move(e) {
				box.style.left = e.pageX - x + 'px';
				box.style.top = e.pageY - y + 'px';
			}
			box.addEventListener('mouseup', function(e) {
				document.removeEventListener("mousemove", move)
			})
		})
	</script>
</body>
</html>